<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">銀行情報</div>
		</header>
		<!-- 1、手机号 2、银行名称、3金融机构代码、4支店名5、交易类型 6、囗座番号 7、账户名称 -->
		<div class="title">あなたの銀行情報</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたの携帯番号を選択してください" :value="mobile"
					v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" readonly />
				<input type="text" class="input" placeholder="あなたの携帯番号を選択してください" :value="mobile" readonly v-else />

			</div>
		</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたの銀行名を選択してください" v-model="data.bank_name"
					v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" />
				<input type="text" class="input" placeholder="あなたの銀行名を選択してください" v-model="data.bank_name" readonly
					v-else />
			</div>
		</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたの金融機関コードを入力してください"
					v-model="data.financial_institution_code" v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" />
				<input type="text" class="input" placeholder="あなたの金融機関コードを入力してください"
					v-model="data.financial_institution_code" readonly v-else />
			</div>
		</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたの支店名を入力してください" v-model="data.branch_name"
					v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" />
				<input type="text" class="input" placeholder="あなたの支店名を入力してください" v-model="data.branch_name" readonly
					v-else />
			</div>
		</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたの取引タイプを入力してください" v-model="data.transaction_type"
					v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" />
				<input type="text" class="input" placeholder="あなたの取引タイプを入力してください" v-model="data.transaction_type"
					readonly v-else />
			</div>
		</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたの銀行口座番号を入力してください" v-model="data.bank_number"
					v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" />
				<input type="text" class="input" placeholder="あなたの銀行口座番号を入力してください" v-model="data.bank_number" readonly
					v-else />
			</div>
		</div>
		<div class="ditem">
			<div class="pd">
				<input type="text" class="input" placeholder="あなたのアカウント名を入力してください" v-model="data.account_holder"
					v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status" />
				<input type="text" class="input" placeholder="あなたのアカウント名を入力してください" v-model="data.account_holder"
					readonly v-else />
			</div>
		</div>
		<!-- <div class="topup" @click="sub" v-if="!userInfo?.bank">設定</div> -->
		<div class="topup" @click="sub" v-if="!dataInfo?.bank||dataInfo.is_bank_edit_status">設定</div>
		<!-- <div class="topup" @click="sub" v-if="userInfo?.bank&&dataInfo.is_bank_edit_status">設定</div> -->
	</div>
</template>

<script>
	import AJAX from '@/utils/http'
	import {
		mapGetters
	} from 'vuex';
	import {
		ElMessageBox
	} from 'element-plus'
	export default {
		computed: {
			...mapGetters(['userInfo']),
		},
		data() {
			return {
				data: {},
				mobile: '',
				dataInfo: {},
				bank: true,
			};
		},
		created() {
			this.fetchData();
			AJAX.post('/index/index', {}, {
				showLoading: false
			}).then(e => {
				this.dataInfo = e.data;
			});
		},
		methods: {
			sub() {
				if (this.data.bank_name == '' || this.data.bank_name == undefined) {
					this.$toast('あなたの銀行名を選択してください');
					return;
				} else if (this.data.financial_institution_code == '' || this.data.financial_institution_code ==
					undefined) {
					this.$toast('あなたの金融機関コードを入力してください');
					return;
				} else if (this.data.branch_name == '' || this.data.branch_name == undefined) {
					this.$toast('あなたの支店名を入力してください');
					return;
				} else if (this.data.transaction_type == '' || this.data.transaction_type == undefined) {
					this.$toast('あなたの取引タイプを入力してください');
					return;
				} else if (this.data.bank_number == '' || this.data.bank_number == undefined) {
					this.$toast('あなたの銀行口座番号を入力してください');
					return;
				} else if (this.data.account_holder == '' || this.data.account_holder == undefined) {
					this.$toast('あなたのアカウント名を入力してください');
					return;
				} else {
					AJAX.post('/user/bank/save/true', this.data).then(e => {
						if (!e.code) {
							this.$toast(e.msg);
							if (!this.dataInfo.personal) {
								setTimeout(() => {
									this.$router.push('/user/personal');
								}, 1000 * 1.5);
								return;
							}
							if (!this.dataInfo.work) {
								setTimeout(() => {
									this.$router.push('/user/work');
								}, 1000 * 1.5);
								return;
							}
							return;
						}

						// this.$alert(e.msg, 'Ok', () => {
						// 	this.$router.replace('/');
						// });
						ElMessageBox.alert(e.msg, 'OK', {
							confirmButtonText: 'OK',
							callback: () => {
								if (!this.dataInfo.personal) {
									setTimeout(() => {
										this.$router.push('/user/personal');
									}, 1000 * 1.5);
									return;
								}
								if (!this.dataInfo.work) {
									setTimeout(() => {
										this.$router.push('/user/work');
									}, 1000 * 1.5);
									return;
								}
								if (this.dataInfo.work && this.dataInfo.personal) {
									this.$router.replace('/');
								}
							},
						})
					});
				}
			},
			fetchData() {
				AJAX.post('/user/bank', {}).then(e => {
					if (e.data.list) {
						this.data = e.data.list;
					}

					this.mobile = e.data.mobile
				});
			},
		}
	};
</script>

<style scoped>
	.personal>.title {
		margin-bottom: 12px;
		margin-top: 12px;
		font-size: 14px;
		position: relative;
		padding-left: 16px;
	}


	.personal>.title:after {
		background-color: var(--system-color);
		border-radius: 50%;
		content: "";
		height: 8px;
		width: 8px;
		left: 0;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.ditem {
		margin-bottom: 12px;
	}

	.personal {
		padding-left: 16px;
		padding-right: 16px;
	}
</style>